
const gulp = require('gulp')
// 2. 导入 gulp-cssmin 这个第三方模块

const cssmin = require('gulp-cssmin')
// 给css添加前缀(兼容问题)
const autoprefixer = require('gulp-autoprefixer')
// // 3. 导入 gulp-uglify 这个第三方模块

const uglify = require('gulp-uglify')
// 3-2. 导入 gulp-babel 这个第三方模块

const babel = require('gulp-babel')
// 4. 导入 gulp-htmlmin 这个第三方模块

const htmlmin = require('gulp-htmlmin')
// 删除文件
const del = require('del')
// 服务器
const webserver = require('gulp-webserver')
// 压缩css
const cssHandler=()=>{
	return gulp.src('./src/css/*.css') // 找到 src 目录下 css 目录下 所有后缀为 .css 的文件
	            .pipe(autoprefixer())  //css添加前缀
	           .pipe(cssmin())// 压缩 css 代码
			   .pipe(gulp.dest('./dist/css'))// 把压缩完毕的 css 代码放在 dist 目录下的 css 文件夹里面
}
// 压缩js
const jsHandler =()=>{
	return gulp.src('./src/js/*.js')
	            .pipe(babel({
					presets:['@babel/env']}))
			    .pipe(uglify())
				.pipe(gulp.dest('./dist/js'))
}
// 压缩html文件
const htmlHandler = ()=>{
	return gulp.src('./src/pages/*.html')
	           .pipe(htmlmin({ // 想进行压缩, 需要在这个对象里面进行配置
				  removeAttributeQuotes: true, // 移出属性上的双引号
				  removeComments: true, // 移除注释
				  collapseBooleanAttributes: true, // 把值为布尔值的属性简写
				  collapseWhitespace: true, // 移除所有空格, 变成一行代码
				  minifyCSS: true, // 把页面里面的 style 标签里面的 css 样式也去空格
				  minifyJS: true, // 把页面里面的 script 标签里面的 js 代码给去空格    
			   }))
			   .pipe(gulp.dest('./dist/pages'))
}
const imgHandler = ()=>{
	return gulp.src('./src/img/**')
	            .pipe(gulp.dest('./dist/img'))
}
// 6. 书写一个移动 lib 文件的方法
const libHandler = () => {
  return gulp.src('./src/lib/**')
             .pipe(gulp.dest('./dist/lib'))
}
// 删除dist
const delHandler = ()=>{
	return del(['./dist'])
}
// 8. 书写一个配置服务器的任务
//    在开发过程中直接把我写的东西在服务器上打开
//    因为我要一边写一个修改, 一遍测试
//    因为 gulp 是基于 node 运行的
//    这里就是使用 node 给我们开启一个服务器, 不是 apache, 也不是 nginx
// 自动刷新: 当 dist 目录里面的代码改变以后, 就会自动刷新浏览器
const serverHandler = ()=>{
	return gulp.src('./dist')// 找到我要打开的页面的文件夹, 把这个文件夹当作网站根目录
	            .pipe(webserver({
					host:'www.wsf.com',// 域名, 这个域名可以自定义
					port:8080,// 端口号, 0 ~ 65535, 尽量不适用 0 ~ 1023
					open:'./pages/index.html',// 你默认打开的首页, 从 dist 下面的目录开始书写
				    livereload: true, // 自动刷新浏览器 - 热重启
					// 所有的代理配置都在 proxies 里面
					proxies: [
					  // 每一个代理配置就是一个对象
					  {
					    source: '/wsf', // 源, 你的代理标识符
					    // 你直接请求下面这个地址压根也拿不到东西, 因为跨域了
					    target: 'http://localhost:80/wsf_damai/src/server/login.php' // 目标, 你要代理的地址
					  },
					  {
					    source: '/wsf2',
					    target: 'http://localhost:80/wsf_damai/src/server/setup.php'
					  },
					  {
						source:'/dm',
						target:'https://search.damai.cn/searchajax.html'
					  },
                    
				
					]
				}))
}
/*
  webserver 这个第三方模块可以顺带配置代理
    + 直接在使用 webserver 的时候添加一个配置项
    + proxies: [
      // 数组里面的每一项都是你的代理配置
      {
        source: '/gx',
        target: '你要代理的地址'
      }
    ]
*/

// 9. 自动监控文件
//    监控 src 下下面的文件, 只要一修改, 就执行对应的任务
//    比如 src 下面的 css 文件夹, 只要里面的文件以修改, 我就执行以下 cssHandler 这个任务
const watchHandler = () => {
  // 监控着 src 下的 css 下的所有 .css 文件, 只要一发生变化, 就会自动执行一遍 cssHandler 任务
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/js/*.js', jsHandler)
  gulp.watch('./src/pages/*.html', htmlHandler)
  gulp.watch('./src/lib/**', libHandler)
  gulp.watch('./src/img/**', imgHandler)
}
// 导出一个默认任务
// 当我将来在命令行执行 gulp default 的时候, 就会自动把我写在 parallel 里面的五个任务给一起执行了
//   小细节: 当你在命令行执行 gulp default 的时候, 可以不写 default
//           你在命令行执行 gulp 这个指令, 就是在执行 gulp default
// module.exports.default = gulp.parallel(cssHandler, jsHandler, htmlHandler, libHandler, imgHandler)


// 就应该在压缩 css/js/html 之前先把 dist 目录删除了
//   要在删除完毕 dist 以后, 在执行 css/js/html/... 之类的压缩转移任务
module.exports.default = gulp.series(
delHandler,
gulp.parallel(cssHandler,jsHandler,htmlHandler,libHandler,imgHandler),
serverHandler,
watchHandler
)
// module.exports.css= cssHandler
// module.exports.js = jsHandler
// module.exports.html = htmlHandler
// module.exports.img = imgHandler
// module.exports.lib = libHandler
